import { Table, Tooltip } from 'antd';
import Cls from 'classnames';
import { DetailedServices } from '../services';
import { connect } from 'umi';
import { useEffect } from 'react';
import { commonPageSizeOptions, showTotalInfo } from '@/common/constVariable';
import pageStyles from '@/common/pageLayout.less';
import { DictionaryRenderFun, formatDecimal } from '../../Acommon';
import { tooltipLength } from '@/utils';
import moment from 'moment';

const Detailed = ({ curRes, datalist }) => {
  const styleFixCls = 'contract-styfixcls-';
  const { DetailPushRun, Detaildata, getDetailReload, taskPushPagination, reloadRequest, taskPushLoading } = DetailedServices(curRes);

  useEffect(() => {
    if (datalist?.id) {
      const obj: any = {
        inventoryID: datalist.id,
        page: 1,
        rows: 10,
      };
      DetailPushRun(obj);
    }
  }, [datalist]);

  const columns: any = [
    {
      title: '资产编号',
      dataIndex: 'assetCode',
      key: 'assetCode',
      width: 160,
      fixed: 'left',
      ellipsis: {
        showTitle: true,
      },
      sorter: (a: any, b: any) => (a.assetCode > b.assetCode ? 1 : -1),
      render: (text: string, record: Record<string, any>) => {
        return (
          <Tooltip title={tooltipLength(text, 50)}>
            <span>{text || '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '资产名称',
      dataIndex: 'assetName',
      key: 'assetName',
      width: 160,
      render: (text: string | null, record: Record<string, any>) => {
        return (
          <Tooltip title={text} placement="top">
            <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '资产分类',
      dataIndex: 'assetClassName',
      key: 'assetClassName',
      width: 120,
      ellipsis: {
        showTitle: true,
      },
      visible: true,
      unDrag: true,
      sorter: (a: any, b: any) => (a.assetClassName > b.assetClassName ? 1 : -1),
      render: (text: string) => DictionaryRenderFun({ text, isState: false }),
    },
    {
      title: '品牌',
      dataIndex: 'brandType',
      key: 'brandType',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.brandType > b.brandType ? 1 : -1),
      render: (text: string) => DictionaryRenderFun({ text, isState: false }),
    },
    {
      title: '规格型号',
      dataIndex: 'paramsInfo',
      key: 'paramsInfo',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.paramsInfo > b.paramsInfo ? 1 : -1),
      render: (text: string) => DictionaryRenderFun({ text, isState: false }),
    },
    {
      title: '数量',
      dataIndex: 'quantityOrArea',
      key: 'quantityOrArea',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.quantityOrArea > b.quantityOrArea ? 1 : -1),
      render: (text: number | null) => formatDecimal(text),
    },
    {
      title: '计量单位',
      dataIndex: 'unitOfMeasurementName',
      key: 'unitOfMeasurementName',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.unitOfMeasurement > b.unitOfMeasurement ? 1 : -1),
      render: (text: string) => DictionaryRenderFun({ text, isState: false }),
    },
    {
      title: '资产原值（元）',
      dataIndex: 'totalValue',
      key: 'totalValue',
      width: 170,
      visible: true,
      sorter: (a: any, b: any) => (a.totalValue > b.totalValue ? 1 : -1),
      render: (text: number | null) => formatDecimal(text),
    },
    {
      title: '管理部门',
      dataIndex: 'assetDepartmentName',
      key: 'assetDepartmentName',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.assetDepartmentName > b.assetDepartmentName ? 1 : -1),
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '管理人',
      dataIndex: 'asseterName',
      key: 'asseterName',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.asseterName > b.asseterName ? 1 : -1),
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '使用部门',
      dataIndex: 'useDepartmentName',
      key: 'useDepartmentName',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.useDepartmentName > b.useDepartmentName ? 1 : -1),
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '使用人',
      dataIndex: 'userName',
      key: 'userName',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.userName > b.userName ? 1 : -1),
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '存放区域',
      dataIndex: 'locationName',
      key: 'locationName',
      width: 220,
      visible: false,
      render: (text: string, record: Record<string, any>) => {
        return (
          <Tooltip title={DictionaryRenderFun({ text: record?.locationName, isState: false })}>
            <div className={pageStyles['over-flow-hidden']}>{DictionaryRenderFun({ text: record?.locationName, isState: false }) || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '详细地点',
      dataIndex: 'locationInfo',
      key: 'locationInfo',
      width: 150,
      visible: false,
      render: (text: string, record: Record<string, any>) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '取得方式',
      dataIndex: 'obtainTypeName',
      key: 'obtainTypeName',
      width: 150,
      ellipsis: {
        showTitle: true,
      },
      visible: true,
      unDrag: true,
      sorter: (a: any, b: any) => (a.obtainTypeName > b.obtainTypeName ? 1 : -1),
      render: (text: string) => DictionaryRenderFun({ text, isState: false }),
    },
    {
      title: '取得日期',
      dataIndex: 'obtainDate',
      key: 'obtainDate',
      width: 200,
      visible: false,
      sorter: (a: any, b: any) => (a.enterStoreTime > b.enterStoreTime ? 1 : -1),
      render: (text: string) => {
        return text ? moment(text).format('YYYY-MM-DD') : '--';
      },
    },
    {
      title: '合同编号',
      dataIndex: 'contractCode',
      key: 'contractCode',
      width: 150,
      ellipsis: {
        showTitle: true,
      },
      visible: true,
      unDrag: true,
      sorter: (a: any, b: any) => (a.contractCode > b.contractCode ? 1 : -1),
      render: (text: string) => DictionaryRenderFun({ text, isState: false }),
    },
    {
      title: '财务入账状态',
      dataIndex: 'entryStateName',
      key: 'entryStateName',
      width: 150,
      ellipsis: {
        showTitle: true,
      },
      visible: true,
      unDrag: true,
      sorter: (a: any, b: any) => (a.entryStateName > b.entryStateName ? 1 : -1),
      render: (text: string) => DictionaryRenderFun({ text, isState: false }),
    },
  ];

  return (
    <div className={Cls('list-table', `${styleFixCls}updateStepsBox-tableBox`)}>
      <Table
        size="small"
        bordered
        scroll={{ x: 1200, y: 'true' }}
        columns={columns}
        dataSource={Detaildata?.rows}
        rowKey={'id'}
        loading={taskPushLoading}
        pagination={{
          ...taskPushPagination,
          showTotal: () => {
            return '共' + Detaildata?.total + '条';
          },
        }}
      />
    </div>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(Detailed);
